<template>
	<view class="content">
		<scroll-view class="list-scroll-content" scroll-y>
			<view class="talk-view" :key="index" v-for="(item, index) in talkList">
				<view>
					<view @click="onclickToTalkInfo(item)">
						<view class="talk-item-view">
							<view class="talk-img">
								<u-avatar :src="item.face" :text="item.face ? '' : item.name"
									bg-color="#DDDDDD"></u-avatar>
								<u-badge bgColor="#F46F6E" absolute size="default" :count="item.unread ? 1 : 0"
									:offset="[6, 6]" is-dot></u-badge>
							</view>
							<view class="talk-info">
								<view class="talk-info-top">
									<view class="talk-name u-line-1">{{ item.name }} </view>
									<view class="talk-time">
										{{ beautifyTime(item.lastTalkTime) }}
									</view>
								</view>
								<view class="talk-message u-line-1">
									<view class="talk-message u-line-1" v-if="item.lastMessageType == 'MESSAGE'">
										{{ item.lastTalkMessage||'' }}
									</view>
									<view class="talk-message u-line-1" v-else-if="item.lastMessageType == 'PICTURE'">
										[图片]
									</view>
									<view class="talk-message u-line-1" v-else-if="item.lastMessageType == 'VIDEO'">[视频]
									</view>
									<view class="talk-message u-line-1" v-else-if="item.lastMessageType == 'VOICE'">[语音]
									</view>
									<view class="talk-message u-line-1" v-else></view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 空白页 -->
			<u-empty text="暂无信息" mode="list" v-if="talkList.length === 0"></u-empty>
		</scroll-view>
		<view v-if="isInStory" class="actions">
			<u-button @click="endAiChat" :custom-style="customStyle" :ripple="true"
				ripple-bg-color="#6236FF">结束对话</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getTalkList,
		reloadChat
	} from "@/api/im.js";
	import storage from "@/utils/storage.js";
	import {
		beautifyTime
	} from "@/utils/filters.js";
	export default {
		components: {},
		props: {
			isInStory: {
				type: Boolean,
				default: false,
			},
			isInGame: {
				type: Boolean,
				default: false,
			},
			storyId: {
				type: [Number, String],
			},
			goodsId: {
				type: [Number, String],
			},
		},
		data() {
			return {
				storage,
				count: {},
				talkList: [], //聊天列表
				userName: "",
				customStyle: {
					width: "360rpx",
					height: "80rpx",
					background: "#6236FF",
					"border-radius": "20rpx",
					"font-weight": "500",
					"font-size": "30rpx",
					color: "#FFFFFF",
				},
				canPlay: false,
			};
		},
		onReady() {
			if (this.isInStory || this.isInGame) {
				// 刷新聊天列表
				this.userTalkList();
			}
		},
		mounted() {
			this.canPlay = true;
		},
		methods: {
			stopStory(callback) {
				callback(true);
			},
			startPlay(callback) {
				callback(true);
			},
			// 此项是否可播放
			canChangeCurrent(callback) {
				callback(this.canPlay);
			},
			reset() {
				let params = {
					gameId: this.goodsId,
					storyId: this.storyId,
				};
				reloadChat(params).then((res) => {
					if (res.data.success) {
						this.userTalkList();
					}
				});
			},
			endAiChat() {
				this.$emit("endAiChat", this.storyId);
			},
			beautifyTime,
			onclickToTalkInfo(item) {
				let payload = {
					gameId: this.goodsId,
					storyId: this.storyId,
					chatId: item.chatId,
				};
				this.$options.filters.talkIm(payload);
			},
			/**
			 * 获取聊天列表
			 */
			userTalkList() {
				let params = {};
				if (this.isInStory) {
					params = {
						storyId: this.storyId,
						gameId: this.goodsId,
					};
				}
				if (this.isInGame) {
					params = {
						gameId: this.goodsId,
					};
				}
				// uni.showLoading({
				// 	title: "加载中",
				// });
				getTalkList(params).then((res) => {
					if (this.$store.state.isShowToast) {
						uni.hideLoading();
					}
					if (res.data.success) {
						this.talkList = res.data.result;
					}
				});
			},
		},
	};
</script>


<style lang="scss">
	.u-badge-dot {
		width: 36rpx;
		height: 36rpx;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss";
</style>